<!-- 关键词选择组件 -->
<template>
	<view class="tag-select">
		<!-- 添加标题 -->
		<input type="text" class="tag-select__title" v-model="title" placeholder="添加标题"/>
		<!-- 提供可选择的默认关键词 -->
		<view class="tag-select__tags flex">
			<view class="tag-select__tag"
			v-for="(item,index) in tagItems"
			:key="item.id"
			@tap="tapSelectTags(index)"
			:class="{'tag-select__tag--active':selectTags.includes(index)}"
			>
				{{item.tag}}
			</view>
		</view>
		
		<!-- 备注 -->
		<view class="tag-select__remark flex">
			<text class="tag-select__remark-text">备注</text>
			<input type="text" class="tag-select__remark-input" v-model="remark" placeholder="输入备注信息"/>
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue';

const tagItems = ref([
	{tag:'证件类',id:'tag01'},
	{tag:'电子产品类',id:'tag02'},
	{tag:'学习用品类',id:'tag03'},
	{tag:'衣物饰品类',id:'tag04'},
	{tag:'生活用品类',id:'tag05'},
	{tag:'其他',id:'tag06'},
])

// 使用 defineModel 实现双向绑定
const tags = defineModel('tags', {
	type: Array,
	default: () => []
})

const title = defineModel('title', {
	type: String,
	default: ''
})

const remark = defineModel('remark', {
	type: String,
	default: ''
})

// 被选中的tag
const selectTags = ref([])

// 监听 selectTags 变化并更新 tags
watch(selectTags, (newTags) => {
	tags.value = newTags.map(index => tagItems.value[index].tag)
}, { deep: true })

function tapSelectTags(index){
	if(selectTags.value.includes(index)){
		selectTags.value = selectTags.value.filter(item=>item!==index);
	}else{
		selectTags.value.push(index);
	}
}

// 清除数据方法
function clearData() {
	selectTags.value = []
	title.value = ''
	remark.value = ''
}

// 导出方法供父组件使用
defineExpose({
	clearData
})
</script>

<style lang="scss" scoped>
.tag-select{
	width: 690rpx;
	// height: 288rpx;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 40rpx;
	box-sizing: border-box;
	padding: 30rpx;
	margin-bottom: 30rpx;
	
	&__title{
		width: 100%;
		height: 54rpx;
		border-radius: 60rpx;
		background-color: #f0f0f0;
		font-size: 24rpx;
		color:#bcb6b6;
		box-sizing: border-box;
		padding-left: 40rpx;
		margin-bottom: 20rpx;
	}
	
	&__tags{
		flex-wrap: wrap;
		// justify-content: space-between;
		margin-bottom: 30rpx;
	}
	
	&__tag{
		width: fit-content;
		flex-shrink: 0;
		height: 40rpx;
		line-height: 40rpx;
		background-color: #f0f0f0;
		padding: .3em .5em;
		border-radius: 30rpx;
		font-size: 24rpx;
		margin-bottom: 18rpx;
		margin-right: 18rpx;
		
		&--active{
			background-color: skyblue;
		}
	}
	
	&__remark{
		width: 100%;
		height: 26rpx;
		font-size: 24rpx;
		
		&-input{
			width: 560rpx;
			margin-left: 18rpx;
			color: #000;
		}
	}
}
</style>